<template>
	<view class="depositManagement_box box">
		<view class="user_info_container">
			<view class="user_info_box_top">
				<view class="user_info_box_top_img">
					<image src="https://img.js.design/assets/img/61249c2c13dce5e53a58bc37.png" mode=""></image>
				</view>
				<view class="user_info_box_top_name">
					{{userInfo.studentName || '暂无'}}
				</view>
				<view class="user_info_box_top_desc">
					学号{{userInfo.studentId || '暂无'}} 宿舍{{userInfo.roomNumber || '(暂无)'}}号
				</view>
				<view class="line" style="margin-top: 20rpx;">

				</view>
			</view>
			<view class="depositManagement_money">
				<view class="depositManagement_money_top">
					当前剩余押金 （元）
				</view>
				<view class="depositManagement_money_bottom">
					{{userInfo.depositMoney || '0.0'}}
				</view>
			</view>
			<view class="depositManagement_type">
				<view class="example">
					<view class="segmented-control">
						<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
							styleType='text' activeColor='#FF5733'>
						</uni-segmented-control>
					</view>
					<view class="content">
						<view v-show="current === 0">
							<view class="depositManagement_type_list" v-for="(item,index) in deductionDetails">
								<view class="depositManagement_type_item">
									<view class="depositManagement_type_item_left over_text">
										【{{item.goodsDictName}}损坏 】 扣除费用{{item.cost}}元
									</view>
									<view class="depositManagement_type_item_right">
										{{item.costTime}}
									</view>
								</view>
							</view>
						</view>
						<view v-show="current === 1">
							选项卡2的内容
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		consumer
	} from "../../api/request.js"
	export default {
		data() {
			return {
				current: 0,
				items: ['扣费明细', '扣费标准'],
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},
				userInfo: null,
				deductionDetails: []
			};
		},
		onLoad(e) {
			const userInfo = JSON.parse(e.userInfo)
			this.userInfo = userInfo
			console.log(e);
			this.consumerMethod(userInfo.id)
		},
		methods: {
			async consumerMethod(schoolUserId) {
				let data = await consumer({
					schoolUserId
				})
				this.deductionDetails = data.data
				console.log(data);
			},
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},
		}
	}
</script>

<style lang="scss">
	.depositManagement_box {}

	.depositManagement_type {
		margin-top: 40rpx;
	}

	.depositManagement_type_list {
		display: flex;
		flex-direction: column;

		.depositManagement_type_item {
			padding: 20rpx;
			border-bottom: 1px solid rgba(228, 228, 228, 1);
			display: flex;

			.depositManagement_type_item_left {
				font-size: 24rpx;
				width: 68%;
				color: rgba(150, 144, 144, 1);
			}

			.depositManagement_type_item_right {
				font-size: 24rpx;
				flex: 1;
				color: rgba(150, 144, 144, 1);
				white-space: nowrap;
			}
		}
	}

	.example {}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.depositManagement_money {
		width: 80%;
		margin: auto;
		background-color: #FF5733;
		color: white;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		margin-top: 40rpx;
		// box-shadow: 5px 12rpx rgba(255, 87, 51, .1);
		box-shadow: 10rpx 10rpx 20rpx 5rpx rgba(0, 0, 0, 0.3);

		.depositManagement_money_top {
			font-size: 26rpx;
			margin: 20rpx;
		}

		.depositManagement_money_bottom {
			font-size: 38rpx;
		}
	}

	.user_info_container {
		width: 90%;
		margin: auto;
		display: flex;
		flex-direction: column;

		.user_info_box_top {
			display: flex;
			flex-direction: column;

			.user_info_box_top_img {
				margin: auto;

				image {
					width: 179.64rpx;
					height: 179.64rpx;
					border-radius: 50%;
				}
			}

			.user_info_box_top_name {
				width: 100%;
				font-size: 44.91rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 61.62rpx;
				color: rgba(0, 33, 80, 1);
				text-align: center;
				vertical-align: top;
				margin: auto;
			}

			.user_info_box_top_desc {
				font-size: 26.95rpx;
				font-weight: 400;
				letter-spacing: 1.12rpx;
				line-height: 36.96rpx;
				color: rgba(122, 134, 154, 1);
				text-align: center;
				vertical-align: top;
				width: 100%;
				margin: auto;
			}

			.user_info_box_top_detail {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				color: rgba(166, 166, 166, 1);
				text-align: left;
				vertical-align: top;
			}
		}

		.user_info_box_center {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.user_info_box_center_title {
				font-size: 35.75rpx;
				font-weight: 400;
				letter-spacing: -0.43rpx;
				line-height: 49.06rpx;
				color: rgba(51, 51, 51, 1);
				text-align: left;
				vertical-align: top;
			}

			.user_info_box_center_list {}
		}
	}
</style>